<template>
  <div class="goods">
    <div class="banner">
      <img
        src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png"
        alt=""
      />
    </div>
    <!-- head 排序按钮 -->
    <div class="list-head">
      <div
        class="head-item"
        :class="{ act: activeKey == 0 }"
        @click="handNavClick(0)"
      >
        <span>综合</span>
      </div>
      <div
        class="head-item"
        :class="{ act: activeKey == 1 }"
        @click="handNavClick(1)"
      >
        <span>价格</span>
        <div class="arrow">
          <van-icon
            name="arrow-up"
            :color="params.order == 'asc' ? '#b4282d' : ''"
          />
          <van-icon
            name="arrow-down"
            :color="params.order == 'desc' ? '#b4282d' : ''"
          />
        </div>
      </div>
      <div
        class="head-item"
        :class="{ act: activeKey == 2 }"
        @click="handNavClick(2)"
      >
        <span>分类</span>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="item in goodsList" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <p>{{ item.name }}</p>
        <p class="price">￥{{ item.retail_price }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { goodsList } from "@/api/goods";
export default {
  data() {
    return {
      activeKey: 0, // 被选中的nav
      // 请求入参
      params: {
        isHot: "", // 人气推荐
        isNew: "", // 新品推荐
        order: "", // 排序
      },
      goodsList: [], // 商品类别
    };
  },
  methods: {
    //获取商品列表
    async getGoodsList() {
      const { data } = await goodsList(this.params);
      this.goodsList = data;
    },
    // head点击事件
    handNavClick(index) {
      this.activeKey = index;
      if (index === 1) {
        if (this.params.order == "" || this.params.order == "desc") {
          this.params.order = "asc";
        } else {
          this.params.order = "desc";
        }
      } else {
        this.params.order = "";
      }
      this.getGoodsList();
    },
  },

  created() {
    let type = this.$route.query.type;
    if (type == "new") {
      this.params.isNew = "1";
    } else {
      this.params.isHot = "1";
    }

    this.getGoodsList();
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
